<template>
	<view class="bargain_container">
		<view class="goods_img_wrap">
			<u-swiper :list="banners" height="360rpx" circular indicator @change="e => currentNum = e.current"
				:indicatorStyle="{'text-align': 'center', 'bottom': '60rpx'}" @click="handleClickSwiper">
			</u-swiper>
		</view>
		<view :style="[unfoldStyle]" class="list_wrap pr bc_fff p_16 flow_h" v-if="myBargin&&myBargin.length">
			<view class="fc pb_16">
				<Divider color="#999" text="我发起的砍价" />
			</view>
			<view class="ptb_8" v-for="item,index in myBargin" :key="index">
				<GoodsCard :data="item" type="bargain-card" goodsType="3"
					@finish="item.bargainirgStatus==0&&getAllData()" />
			</view>
			<view class="unfold_expand pa b_0 l_0 r_0 ptb_16 bc_fff fx aic jcc fc_primary"
				v-if="!isUnfold&&myBargin.length>2" @click="handleUnfold">
				展开<u-icon name="arrow-down" color="#FE5A1C" size="32"></u-icon>
			</view>
		</view>
		<u-gap height="24" bgColor="#F6F6F6"></u-gap>
		<u-sticky offsetTop="0">
			<view class="tabs_wrap">
				<u-tabs :current="currentType" :list="cateList" keyName="typeName" lineColor="#F93914"
					itemStyle="font-size:28rpx;padding: 20rpx 16rpx;background: #fff; " activeStyle="color: #F93914"
					inactiveStyle="color: #000000" lineWidth="32rpx" lineHeight="6rpx"
					@change="handleGoodsType"></u-tabs>
			</view>
		</u-sticky>
		<view class="pr bc_fff p_16 flow_h minh_100">
			<view class="fc pb_16">
				<Divider color="#999" text="砍价列表" />
			</view>
			<view class="ptb_8" v-for="item,index in dataList" :key="index">
				<GoodsCard :data="item" type="bargain-list-card" goodsType="3" :toDetail="false"
					@click.native="handleGoodsDetail(item)" />
			</view>
			<view class="ptb_16">
				<u-loadmore :status="loadingStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import Divider from '@/components/Divider.vue'
	import dataMixin from '@/mixins/data.js'
	import bannerMixin from '@/mixins/banner.js'
	import cateMixin from '@/mixins/cate.js'
	import api from '@/service/config/api.js'
	export default {
		mixins: [dataMixin, bannerMixin, cateMixin],
		components: {
			GoodsCard,
			Divider
		},
		data() {
			return {
				currentNum: 0,
				dataInfo: {
					banner: []
				},
				isUnfold: false,
				listUrl: '/goods/api/product/bargainirgProductList',
				params: {
					userType: this.$store.state.userInfo.identityType || 1,
					functionRange: this.$store.state.functionRange
				},
				dataList: [],
				myBargin: [],
				bannerId: 5, // banner位置
				noHideLoading: true,
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
			}
		},
		onLoad() {
			this.getCateList()
		},
		onShow() {
			this.getAllData()
		},
		computed: {
			unfoldStyle() {
				return this.isUnfold ? {
					'max-height': 'none'
				} : {}
			}
		},
		methods: {
			getAllData() {
				this.$utils.loading()
				Promise.all([this.getBannerData(), this.getData(true), this.getMyBargin()]).then(() => {
					uni.hideLoading()
				})
			},
			getMyBargin() {
				return new Promise(resolve => {
					if(!this.$storage.getItem('token')) {
						resolve()
						return 
					}
					api.get('/goods/api/product/userBargainirgInfo', {
						...this.$store.state.userInfo.customerId ? {
							customerId: this.$store.state.userInfo.customerId
						} : {},
					}, {
						noHideLoading: true
					}).then(res => {
						this.myBargin = res.data
					}).finally(() => {
						resolve()
					})
				})
			},
			handleUnfold() {
				console.log(999)
				this.isUnfold = !this.isUnfold
			},
			handleGoodsDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/pages/detail?id=${item.id}&goodsType=3`
				})
			}
		},
	}
</script>

<style lang="scss">
	@include color_page;
</style>

<style lang="scss" scoped>
	.bargain_container {
		.list_wrap {
			top: -32rpx;
			margin-top: -16rpx;
			border-radius: 24rpx 24rpx 0 0;
			max-height: 668rpx;
			transition: all 0.3s;

			.unfold_expand {
				margin-bottom: -32rpx;
			}
		}

		.unfold {
			max-height: auto !important;
		}
	}
</style>